<template>
  <div ref="divDemo">hello</div>
  <input type="text" placeholder="请输入关键字" v-model="keyword">
  <hr>
  <div ref="countDom">{{ count }}</div>
  <button @click="count++">count++</button>
  <button @click="proxy.age++">proxy.age++</button>
  <button @click="changeName">proxy.name change</button>
  <button @click="changeSport">proxy.likes.sport change</button>
  <button @click="changeReading">proxy.likes.reading.name </button>

</template>
<script setup>
import {watch,ref,reactive,watchEffect,watchPostEffect} from 'vue'
const keyword = ref('')
const divDemo = ref(null)
const count = ref(1)
const num = ref(99)
const proxy = reactive({
  name:'zs',
  age:18,
  likes:{
    sport:['跑步'],
    reading:{
      name:'JavaScript从入门到放弃',
      auth:'佚名',
      price:999.99
    }
  }
})
const countDom = ref(null)
// watch(数据源，回调，选项)
// watch(keyword,async ()=>{
//   const res = await fetch(`http://shop.bufantec.com/bufan/search/helperaction?keyword=${keyword.value}`)
//   divDemo.value.style.color='red'
// })

// 侦听数据源：单个 ref reactive getter函数

// watch(count,(newVal,oldVal)=>{
//   console.log('newVal==>',newVal);
//   console.log('oldVal==>',oldVal);
//   // 在 watch 获取的DOM 是数据更新前的 DOM
//   console.log(countDom.value.textContent);
// },{
//   flush:'post' // 更新后的 DOM 
// })

// 监听响应式对象 reactive 新旧值相同  默认深层监听
// watch(proxy,(newVal,oldVal)=>{
//   console.log('newVal==>',newVal);
//   console.log('oldVal==>',oldVal);
// })

// 监听属性 必须是 getter 函数
// watch(()=>proxy.age,(newVal,oldVal)=>{
//   console.log('newVal==>',newVal);
//   console.log('oldVal==>',oldVal);
// })

// watch(()=>proxy.likes.reading,(newVal,oldVal)=>{
//   console.log('newVal==>',newVal);
//   console.log('oldVal==>',oldVal);
// },{
//   // 手动开启 深度监听，不建议
//   deep:true
// })

// watch([count,()=>num.value],([newCountVal,newNumVal],[oldCountVal,oldNumVal])=>{
//   console.log('newCountVal==>',newCountVal);
//   console.log('newNumVal==>',newNumVal);
//   console.log('oldCountVal==>',oldCountVal);
//   console.log('oldNumVal==>',oldNumVal);
// },{
//   // 组件加载会立即执行一次
//   immediate:true
// })


// watchEffect(()=>{
//   console.log('count==>',count);
//   console.log('proxy==>',proxy.age);
// })

// 1. 立即执行
// 2. 不用显示声明监听的数据源
// watchEffect(async ()=>{
//   const res = await fetch(`http://shop.bufantec.com/bufan/search/helperaction?keyword=${keyword.value}`)
 
// })


watchPostEffect(()=>{
  console.log("count==>",count);
  console.log(countDom.value.textContent);
})

const changeName = ()=>{
  proxy.name = 'ls'
  console.log(proxy.name);
}
const changeSport = ()=>{
  proxy.likes.sport.push('羽毛球')
}
const changeReading = ()=>{
  proxy.likes.reading.name = "javaScript 精髓"
  // proxy.likes.reading = {name:'"javaScript 精髓"'}
}

let unwatch = null
setTimeout(()=>{
  unwatch = watch(count,()=>{
    console.log("count==>",count);
  })
},2000)

onBeforeMount(()=>{
  // 停止监听
  unwatch()
})



</script>